<template>
  <view class="menu jh-flex jh-row jh-align-top" :style="[pageStyle]">
    <view class="menu-left" :style="[leftStyle]"></view>
    <view class="menu-right" :style="[rightStyle]">
      <image style="width: 110px;height: 380px;" :src="ossDomain+'/menu-bar-bg.png'"></image>
      <image class="menu-right-logo" :src="ossDomain+'/menu-bar-logo.png'"></image>
      <view class="menu-list">
        <block v-for="(i,index) in (propMenuList || menuList)" :key='index'>
          <view class="menu-list-item" @touchstart="touchstart(index)" @touchend="touchend()" @click='menuNext(i)'>
            <image v-if="menuId == i.menu_id || tapIndex == index" class="menu-list-item-img" :class="'menu-item'+index+'-a'" :src="ossDomain + '/menu-item/menu-item'+(index+1)+'-active.png'"></image>
            <image v-else class="menu-list-item-img" :class="'menu-item'+index" :src="ossDomain + '/menu-item/menu-item'+(index+1)+'.png'"></image>
            <view class="menu-list-item-text jh-flex-center jh-inline-item">
              <!-- #ifdef APP-NVUE -->
              <jh-text size="10px" color="#F7F8F8" type="Bold" :value="i.name"></jh-text>
              <!-- #endif -->
              <!-- #ifndef APP-NVUE -->
              <text class="font-B c-F7F8F8" style="font-size: 10px;">{{i.name}}</text>
              <!-- #endif -->
            </view>
          </view>
        </block>
      </view>
      <!-- #ifndef APP-NVUE -->
      <image class="menu-right-bgt" style="width: 37px;height: 380px;" :src="ossDomain+'/menu-bar-bg2.png'" @touchstart="touchstartBody" @click='clickBody' @touchend="touchend()"></image>
      <!-- #endif -->
      <!-- #ifdef APP-NVUE -->
      <image class="menu-right-bgt" style="width: 37px;height: 380px;" :src="ossDomain+'/menu-bar-bg2.png'"></image>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations 
  } from 'vuex'
  export default {
    props: {
      menuId: {
        type: Number | String,
        default: 0
      },
      propMenuList: {
        type: Array | String,
        default: ''
      }
    },
    data() {
      return {
        ossDomain: uni.ossDomain,
        safeArea: {},
        pageStyle: {},
        leftStyle: {},
        rightStyle: {},
        tapIndex: -1,
        allRoutes: uni.$ROUTES
      }
    },
    computed: {
      ...mapState({
      	sysInfo: state => state.global.systemInfo,
        menuList: state => state.global.menuList[0],
        userInfo: state => state.user.userInfo,
      }),
    },
    watch: {
      sysInfo () {
        this.init()
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init () {
        let {
          screenHeight,
          screenWidth,
          safeArea,
          statusBarHeight
        } = this.sysInfo
        this.safeArea = safeArea
        this.imgSrc = this.bgImg || '/static/images/kaluolin/bg.png'
        this.pageStyle = {
          width: ('0' || safeArea.left || statusBarHeight) + 110 + 'px',
          height: screenHeight + 'px',
        }
        this.leftStyle = {
          width: ('0' || safeArea.left || statusBarHeight) + 'px',
          height: screenHeight + 'px',
        }
        this.rightStyle = {
          width: '110px',
          height: screenHeight + 'px',
        }
      },
      menuNext (e) {
        if (this.menuId == e.menu_id || !this.userInfo?.token?.token) {
          return
        }
        this.$emit('menuTap', e)
        return
        let item = this.allRoutes.find(i => {
          return i.menuId == e.menu_id
        })
        if (item) {
          return uni.$navigateTo(item.path)
          if (item.parent_id) {
          } else {
            uni.$redirectTo(item.path)
          }
        } else {
          uni.showToast({
            title: '敬请期待',
            icon: 'none'
          })
        }
      },
      touchstart (index) {
        this.tapIndex = index
      },
      touchend () {
        this.tapIndex = -1
      },
      touchstartBody (e) {
        console.log(e);
        let y = e.touches[0].clientY
        let query = uni.createSelectorQuery().in(this)
        query.selectAll('.menu-list-item').boundingClientRect(dom => {
          dom.forEach((r,index) => {
            let {top, bottom} = r
            if (y > top && y < bottom) {
              console.log(index);
              this.touchstart(index)
            }
          })
        }).exec()
      },
      clickBody (e) {
        let y = e.touches[0].clientY
        let query = uni.createSelectorQuery().in(this)
        query.selectAll('.menu-list-item').boundingClientRect(dom => {
          dom.forEach((r,index) => {
            let {top, bottom} = r
            if (y > top && y < bottom) {
              // console.log(index);
              this.menuNext((this.propMenuList || this.menuList)[index])
            }
          })
        }).exec()
      },
    }
  };
</script>

<style lang="scss" scoped>
  .menu {
    &-left{
      background-color: #00374D;
      // #ifndef APP-NVUE
      display: block;
      //#endif
    }
    &-right{
      position: relative;
      &-logo{
        position: absolute;
        left: 18px;
        top: 31.5px;
        width: 53px;
        height: 36px;
      }
      &-bgt{
        position: absolute;
        top: 0;
        left: 71px;
        z-index: 10;
      }
    }
    &-list{
      position: absolute;
      top: 83px;
      left: 0;
      width: 110px;
      height: 261px;
      &-item{
        position: relative;
        width: 110px;
        height: 28px;
        margin-bottom: 1px;
        &-img{
          width: 110px;
          height: 28px;
          // #ifndef APP-NVUE
          display: block;
          //#endif
        }
        &-text{
          position: absolute;
          top: 0;
          left: 0;
          width: 80px;
          height: 28px;
        }
      }
    }
  }
  .menu-item0{
    width: 73px;
    &-a{
      width: 74px;
    }
  }
  .menu-item1{
    width: 77px;
    &-a{
      width: 77px;
    }
  }
  .menu-item2{
    width: 82px;
    &-a{
      width: 83px;
    }
  }
  .menu-item3{
    width: 89px;
    &-a{
      width: 90px;
    }
  }
  .menu-item4{
    width: 95px;
    &-a{
      width: 96px;
    }
  }
  .menu-item5{
    width: 99px;
    &-a{
      width: 100px;
    }
  }
  .menu-item6{
    width: 100px;
    &-a{
      width: 100px;
    }
  }
  .menu-item7{
    width: 99px;
    &-a{
      width: 100px;
    }
  }
  .menu-item8{
    width: 97px;
    &-a{
      width: 98px;
    }
  }
</style>
